<template>
    <div>
        <TabControl :options="options" @tabClick="tabClick">
            <template>
                <List>
                    <template v-slot:item>
                        <Item>
                            <template v-slot:option>
                                <div v-if="label === '已申报'">
                                    <div class="">
                                        <div class="schedule">
                                            <div class="plan">
                                                途中
                                            </div>
                                            <div class="accomplish">
                                                完成
                                            </div>
                                        </div>
                                        <div class="result-manage"></div>
                                    </div>
                                </div>
                                <div v-else>
                                    <el-link type="primary">
                                        提交审核
                                    </el-link>
                                </div>

                            </template>
                        </Item>
                    </template>
                </List>
            </template>

        </TabControl>
    </div>
</template>

<script>
    import TabControl from "../../../../components/tabControl/TabControl";
    import List from "../../../../components/list/List";
    import Item from "../../../../components/list/item/Item";
    import {Link} from "element-ui";

    export default {
        name: "travelDeclaration",
        components: {
            TabControl,
            List,
            Item,

        },
        data() {
            return {
                label: '已申报',
                options: [
                    {
                        label: "已申报",
                        name: "已申报"
                    },
                    {
                        label: "未申报",
                        name: "未申报"
                    },
                    {
                        label: "被退回",
                        name: "被退回"
                    }
                ]
            }
        },
        methods: {
            tabClick(label) {
                this.label = label;
                console.log(this.label);
            }
        }
    }
</script>

<style scoped>
    .schedule {
        display: flex;
        width: 90px;
        height: 26px;
        /*color: rgba(255, 255, 255, 1);*/
        /*background-color: rgba(212, 48, 48, 1);*/
        font-size: 13px;
        line-height: 26px;
        text-align: center;
        justify-content: space-around;
    }
    .accomplish{
        border-radius: 0 25px 25px 0;
        width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: solid #000 1px;
        background-color: #D43030;
    }
    .plan{
        border-radius: 25px 0 0 25px;
        width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: solid #000 1px;
    }
</style>
